<template>
  <div class="app-container">
    <div v-if="show=='a'">
      <el-form :model="queryParams" ref="queryParams" :inline="true" v-show="showSearch" label-width="68px">
<!--        <el-form-item label="表单名称" prop="topicName">-->
<!--          <el-input-->
<!--            v-model="queryParams.topicName"-->
<!--            placeholder="请输入名称"-->
<!--            clearable-->
<!--            style="width: 240px;"-->
<!--            size="small"-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-select v-model="queryParams.status" placeholder="请选择状态" size="small">-->
<!--            <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="填写时间">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change = getDateRange
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="primary" icon="el-icon-bottom" size="mini" @click="download">导出</el-button>
        </el-form-item>

        <el-form-item style="float:right;">
          <div class="flex">
            <span>数据总条数：</span>
            <span class="allDataNum">{{allNum}}</span>
          </div>
        </el-form-item>
        <el-form-item style="float:right;">
          <el-button type="success" icon="el-icon-back" plain size="mini" @click="back">返回</el-button>
        </el-form-item>
      </el-form>

      <el-table ref="tables" v-loading="loading" :data="list" :default-sort="defaultSort" @sort-change="handleSortChange">
        <el-table-column type="index" align="center" />
        <el-table-column v-for="(item,index) in labelList" :label="item.label" align="center" :prop="item.vModel" width="270">
          <template slot-scope="scope">
            <div v-if="showVal(scope.row[item.vModel]).cate == 'string'">{{showVal(scope.row[item.vModel]).info}}</div>
            <div v-else style="display:flex;">
              <div v-if="showVal(scope.row[item.vModel]).info.length > 0" v-for="item in showVal(scope.row[item.vModel]).info">
                <img :src="item.url" style="width:50px;height:50px;margin-right:10px;" />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { formDataList,downLoadList } from "@/api/form.js";
import FormView from './detail'
import VueClipboard from 'vue-clipboard2'
import Vue from "vue"
Vue.use(VueClipboard)
export default {
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [
        {topicName:'环保调查', creater:'wsl', operTime:new Date()}
      ],
      allNum:0,
      labelList:[],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: {prop: 'operTime', order: 'descending'},
      options:[
        {value: 0,label: '禁用'},
        {value: 1,label: '正常'}
      ],
      topicName:'',
      // 表单参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      formDetail:{},
      show:'a',
      formContent:{},
    };
  },
  components:{FormView},
  mounted() {
    this.queryParams.topicId = this.$route.query.topicId
    this.topicName = this.$route.query.topicName
    this.getList();
  },

  methods: {
    /** 查询登录日志 */
    getList() {
      this.loading = true;
      formDataList(this.addDateRange(this.queryParams)).then( response => {
        this.loading = false;
        let temp = response.data.tableDataInfo.rows;
        this.allNum = response.data.datanum
        temp.forEach(item=>{
          // let tempB = JSON.parse(item.topicValue)
          // Object.keys(tempB).forEach(key=>{
          //   this.$set(item,key,tempB[key])
          // })
          item.createTime = this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
        })
        this.list = temp;
        console.log(this.list)
        this.total = response.data.tableDataInfo.total;

        this.labelList = []
        let labels = response.data.attributeList
        labels.forEach(labelItem=>{
          this.labelList.push({label:labelItem.label,vModel:labelItem.vModel})
        })
        this.labelList.push({label:'创建时间',vModel:'createTime'})
      }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 排序触发事件 */
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop;
      this.queryParams.isAsc = column.order;
      this.getList();
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.$router.push({path:'datadetail',query:{id:this.queryParams.topicId,formData:JSON.stringify(row),topicName:this.topicName,type:'view'}})
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const operIds = row.operId || this.ids;
      this.$modal.confirm('是否确认删除日志编号为"' + operIds + '"的数据项？').then(function() {
        return delOperlog(operIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 清空按钮操作 */
    onCopy(e) {
      this.$message.success("链接已复制到剪切板！")
    },
    onError (e) {
      this.$message.error("抱歉，复制失败！")
    },
    back(){
      this.$router.go(-1);
    },
    download(){
      downLoadList(this.queryParams).then((response=>{
        this.handlePreview(response.msg)
      }))
    },
    getDateRange(val){
      console.log(val)
      if(val){
        this.queryParams.createTimeBegin = val[0]+' 00:00:00'
        this.queryParams.createTimeEnd = val[1]+' 59:59:59'
      }else{
        this.queryParams.createTimeBegin = ''
        this.queryParams.createTimeEnd = ''
      }
    },
    showVal(row){
      let cate = 'string',
          info = []
      if(row && row != ''){
        let temp = row.substr(0,2) == '[{'
        cate = temp ? 'object' : 'string'
        info = temp ? JSON.parse(row) : row
      }
      return {cate:cate,info:info}
    },
    handlePreview(file) {
      let src = file
      //let srcs = encodeURI(src);
      let a = document.createElement('a');
      a.setAttribute('target', '_black');
      a.setAttribute('href', src);
      a.setAttribute('id', 'linkUrl');
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(document.getElementById('linkUrl'))
    },
  }
};
</script>
<style scoped>
.allDataNum{
  color:#1c84c6;
  font-weight:bold;
  font-size:20px;
}
.flex{
  display:flex;
  align-items: center;
  justify-content: flex-start;
  padding-left:15px;
  padding-right:15px;
}
</style>
